<template>
    <div id="new-draft">
        <div class="post-head">
            <div>
                <span :class="['head-item',{'active':show[0]}]" @click="showDiv(0)">流程表单</span>
                <span :class="['head-item',{'active':show[1]}]" @click="showDiv(1)">流程图</span>
                <span :class="['head-item',{'active':show[2]}]" @click="showDiv(2)">流程状态</span>
            </div>
            <div class="post-button-all">
                <el-button class="post-button" size="mini" @click="submitForm">提交</el-button>
                <el-button class="post-button" size="mini">保存</el-button>
            </div>
        </div>
        <div class="division"></div>
        <div>
            <div v-show="show[0]">
                <div class="form-head">桐庐县江南镇人民政府收文登记</div>
                <div>
                    <el-form class="form" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="left">
                        <div class="form-border1">
                            <div>
                                <el-form-item label="收文编号:" placeholder="可自动生成" prop="id" class="main-box-content">
                                    <el-input v-model="formData.id" clearable :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="收文日期" prop="date" class="main-box-content">
                                    <el-date-picker v-model="formData.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    :style="{width: '100%'}" placeholder="结束日期" clearable></el-date-picker>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="form-border2">
                            <div>
                                <el-form-item label="来文单位:" prop="unit" class="main-box-content">
                                    <el-input v-model="formData.unit" clearable :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="来文字号:" prop="wordSize" class="main-box-content">
                                    <el-input v-model="formData.wordSize" clearable :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="性质:" prop="type" class="main-box-content">
                                    <el-select v-model="formData.type" clearable :style="{width: '60%'}">
                                        <el-option v-for="(item, index) in type" :key="index" :label="item.label" :value="item.value"
                                            :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="主或抄:" prop="select" class="main-box-content">
                                    <el-select v-model="formData.select" clearable :style="{width: '60%'}">
                                        <el-option v-for="(item, index) in select" :key="index" :label="item.label" :value="item.value"
                                            :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="form-border1">
                            <div>
                                <el-form-item label="来文标题:" prop="title">
                                    <el-input v-model="formData.title" clearable :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="收件人:" prop="addressee">
                                    <el-input v-model="formData.addressee" clearable :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="文件和附件:" prop="annex">
                                    <el-input v-model="formData.annex" clearable :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="备注:" prop="remarks">
                                    <el-input v-model="formData.remarks" clearable :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="份数:" prop="copies">
                                    <el-input v-model="formData.copies" clearable :style="{width: '60%'}">
                                    </el-input>
                                </el-form-item>
                            </div>
                        </div>

                        <div class="form-border3">
                            <el-form-item label="领导批示:" prop="leaderContext">
                                <el-input v-model="formData.leaderContext" type="textarea"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </div>

                        <div class="form-border4">
                            <el-form-item label="办文情况:" prop="officeContext">
                                <el-input v-model="formData.officeContext" type="textarea"
                                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
            <div v-show="show[1]">流程图</div>
            <div v-show="show[2]">流程状态</div>
        </div>
        <div class="division2"></div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: [true,false,false],
            formData: {
                id: undefined,
                date: null,
                unit: undefined,
                wordSize: undefined,
                type: undefined,
                select: undefined,
                title: undefined,
                addressee: undefined,
                annex: undefined,
                remarks: undefined,
                copies: undefined,
                leaderContext: undefined,
                officeContext: undefined,
            },
            rules: {
                unit: [{
                required: true,
                message: '请输入来文单位',
                trigger: 'blur'
                }],
                wordSize: [{
                required: true,
                message: '请输入来文字号',
                trigger: 'blur'
                }],
                title: [{
                required: true,
                message: '请输入来文标题',
                trigger: 'blur'
                }],
                addressee: [{
                required: true,
                message: '请输入收件人',
                trigger: 'blur'
                }],
                annex: [{
                required: true,
                message: '请输入文件和附件名',
                trigger: 'blur'
                }],
                remarks: [{
                required: true,
                message: '请输入备注',
                trigger: 'blur'
                }],
                copies: [{
                required: true,
                message: '请输入份数',
                trigger: 'blur'
                }],
                date: [{
                required: true,
                message: '请选择 ',
                trigger: 'change'
                }],
            },
            select: [{
                "label": "主",
                "value": 1
            }, {
                "label": "抄",
                "value": 2
            }],
            type: [{
                "label": "类型1",
                "value": 1
            }, {
                "label": "类型2",
                "value": 2
            }],
        }
    },
    methods: {
        showDiv(index) {
            for (let i = 0; i < this.show.length; i++) {
                if (i == index) {
                    this.show.splice(i, 1, true)
                }else{
                    this.show.splice(i, 1, false)
                }
            }
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return
                // TODO 提交表单
            })
        },
    }
}
</script>

<style scoped>
    .post-head{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-weight: 500;
    }
    /* 按钮区域样式 */
    .post-button-all{
        margin-right: 60px;
    }
    /* 单个按钮样式 */
    .post-button{
        background-color: rgb(60, 136, 172);
        color: white;
        border-radius: 5px;
    }
    .head-item{
        margin-left: 25px;
        cursor:pointer;
        padding-left: 10px;
        padding-right: 10px;
    }
    .active{
        border-bottom: 2px solid rgb(52, 186, 240);
    }
    /* 分割线 */
    .division{
        width: 100%;
        margin: 0 auto;
        height: 2px;
        background-color: rgb(209, 208, 208);
        margin-top: 5px;
        margin-bottom: 15px;
    }
    /* 分割线2 */
    .division2{
        width: 100%;
        margin: 0 auto;
        height: 2px;
        background-color: rgb(209, 208, 208);
        margin-top: 25px;
        margin-bottom: 15px;
    }
    /* 发文稿纸头部标题 */
    .form-head{
        color: rgb(255, 0, 0);
        font-size: 18px;
        text-align: center;
    }
    .form{
        width: 80%;
        margin: 0 auto;
        color: rgb(255, 0, 0);
    }
    .form-border1{
        border-bottom: 2px solid rgb(255, 0, 0);
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 100px;
    }
    .el-form-item__label{
        color: rgb(255, 0, 0);
    }
    
    .form-first{
        display: -webkit-box;
        -webkit-box-orient: vertical;   /*属性值：[horizontal]横向/[vertical]纵向*/
        align-items: center;
        padding-left: 100px;
    }
    .main-box-content{
        -webkit-box-flex: 1;
        margin-top: 10%;
    }
    .form-second{
        border-left: 2px solid rgb(255, 0, 0);
        width: 50%;
    }
    .second-item1{
        border-bottom: 2px solid rgb(255, 0, 0);
        padding-left: 30px;
        height: 60px;
        line-height: 50px;
        margin-top: 4%;
    }
    .second-item2{
        padding-left: 30px;
    }
    .form-border2{
        border-bottom: 2px solid rgb(255, 0, 0);
        display: flex;
        justify-content: space-between;
        padding-left: 100px;
        padding-right: 100px;
    }
    .form-thired{
        padding-left: 100px;
    }
    .form-four{
        border-left: 2px solid rgb(255, 0, 0);
        width: 50%;
    }
    .thired-item{
        margin-top: 8%;
    }
    .four-item{
        margin-top: 4%;
        padding-left: 30px;
    }
    .form-border3{
        border-bottom: 2px solid rgb(255, 0, 0);
        padding-left: 100px;
        padding-top: 2%;
    }
    .form-border4{
        padding-left: 100px;
        padding-top: 2%;
    }
    .form-five{
        display: flex;
    }
</style>
<style>
    #new-draft .el-form-item__label {
        color: rgb(255, 0, 0);
    }
</style>